<template>
  <view class="index">
	<!-- 1.封装后的顶部搜索框 -->
	<TopSearch></TopSearch>
	<!-- 2.轮播图 -->
	<!-- 
		轮播图的宽 / 原图的宽 === 轮播图的高 / 原图的高 
		轮播图的高 = 原图的高 * 轮播图的宽 / 原图的宽
		          = 340 * 750rpx / 750
	-->
	<u-swiper
		:list="swiperList"
		keyName="image_src"
		:autoplay="true"
		circular="true"
		height="340rpx"
		indicator
		indicatorMode="dot"
		radius="0"
    ></u-swiper>
	<!-- 3.导航模块 -->
	<view class="navs">
		<navigator 
			v-for="item in navs" 
			:key="item.name">
			<u--image 
				width="100%" 
				:src="item.image_src" 
				mode="widthFix"
			></u--image>
		</navigator>
	</view>
	<!-- 4.楼层 -->
	<view class="floors">
		<view class="floor-item" v-for="item in floors" :key="item.floor_title.name">
			<!-- 4.1标题图片 -->
			<view class="floor-item-title">
				<u--image :src="item.floor_title.image_src" width="100%" mode="widthFix"></u--image>
			</view>
			<!-- 4.2内容 -->
			<view class="floor-item-content">
				<navigator v-for="(item1, index1) in item.product_list" :key="item1.name">
					<!-- 第一张图片仍然使用高度自适应，其他图片使用默认的scaleToFill -->
					<u--image
						v-if="index1===0"
						:src="item1.image_src" 
						width="100%" 
						mode="widthFix" 
						radius="6rpx"
					></u--image>
					<u--image
						v-else
						:src="item1.image_src" 
						width="100%" 
						height="188rpx"
						mode="scaleToFill" 
						radius="6rpx"
					></u--image>
				</navigator>
			</view>
		</view>
	</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
		// 轮播图数组
		swiperList: [],
		// 导航栏数组
		navs: [],
		// 楼层数组
		floors: []
    };
  },
  onLoad() {
	  // 之前直接在onLoad中使用async/await逐个发送请求，会变成上一个请求的结果回来了下一个请求才会发送的情况，请求所需时间长
	  // 解决办法：1.每个请求都分别用定时器settimeout包起来，利用宏任务与微任务的执行顺序优化请求所需时间
	  // 2.使用Promise.all就可以让所有请求同时发送，优化请求所需时间
	  Promise.all([this.getSwiperList(), this.getNavs(), this.getFloors()]).then(()=>{
		  console.log("三个请求都完成了")
	  })
  },
  methods: {
	  async getSwiperList() {
		// 轮播图数据
		// 解构的同时重命名：将message重命名为swiperList
		const { message:swiperList } = await uni.$u.http.get("/home/swiperdata")
		this.swiperList = swiperList
	  },
	  async getNavs() {
		// 导航栏数据
		const { message:navs } = await uni.$u.http.get("/home/catitems")
		this.navs = navs
	  },
	  async getFloors() {
		// 楼层数据
		const { message:floors } = await uni.$u.http.get("/home/floordata")
		this.floors = floors
	  }
  }
};
</script>

<style lang="scss" scoped>
.navs {
	display: flex;
	navigator {
		flex: 1;
		padding: 20rpx;
	}
}
.floor-item-content {
	padding: 10rpx 0;
	navigator {
		float: left;
		width: 232rpx;
		margin-left: 15rpx;
		&:nth-last-child(-n+2) {
			margin-top: 10rpx;
		}
	}
	&::after {
		content: "";
		display: block;
		clear: both;
		overflow: hidden;
	}
}
</style>

